
import { useTranslation } from 'react-i18next'
import { Link, useNavigate } from "react-router-dom";
import HeaderTitle from "../login/header";
import style from "./index.module.less"
import React, { Fragment, useState, useEffect } from 'react'
import { Input, QRCode, Space, message } from 'antd';

import { login,invitefriend } from "@/apis/user.js"

import banner1 from "../../static/1.jpg"
import banner2 from "../../static/2.jpg"
import banner3 from "../../static/3.jpg"
import banner4 from "../../static/4.jpg"


const Invite = (props) => {
	const navigate = useNavigate()
	const [detail,setDetail]=useState({});
	const [list, setlist] = useState({});
	useEffect(() => {
		console.log("初始化----邀请好友");
		invitefriend().then(res => {
			if (res.status.errorCode == 0 && res.data != null) {
				setDetail(res.data)
				setlist(res.data.record)
			}
		})
		document.getElementById('root').scrollIntoView(true);
		document.getElementById('body').scrollIntoView(true);
		return ()=>{console.log('初始化----个人中心')}
	}, []);
	const copy = () => {
		//因为我的input框里面还有button 按钮，所以在选择节点的时候，一定要只选择input  
		var copyDOM = document.querySelector(".invite");  //需要复制文字的节点
		var range = document.createRange(); //创建一个range
		window.getSelection().removeAllRanges();   //清楚页面中已有的selection
		range.selectNode(copyDOM);    // 选中需要复制的节点    
		window.getSelection().addRange(range);   // 执行选中元素
		var successful = document.execCommand('copy');    // 执行 copy 操作  
		if(successful){
			message.success(t('invite.title1'))
		}else{
			message.error(t('invite.title2'))
		}
		// 移除选中的元素  
		window.getSelection().removeAllRanges(); 
	}
	const { t } = useTranslation();
	
	return (
		<React.Fragment>
			<HeaderTitle title={t('invite.title3')} right_title={t('agent.title2')}/>
			<div className={style['main']}>
				<div className={style['tableheader']}>
					<div className={style['tableheader_li']}>{t('invite.title4')}</div>
					<div className={style['tableheader_li']}>{t('invite.title5')}</div>
					<div className={style['tableheader_li']}>{t('invite.title6')}</div>
				</div>
				<div className={style['tablebady']}>
					<div className={style['tablebadyul']}>
						{list.length > 0 && (
							list.map((item,index)=>{
							return (
								<div className={style['tablebadyli']} key={index}>
									<span>{detail.haoyou_count}</span>
									<span>{item.time}</span>
									<span>{item.total}</span>
								</div>
							);
							})
						)}
						
					</div>
				</div>
				<div className={style['detail']}>
					<h2>{t('invite.title7')}</h2>
					<div className="invite">{detail.invite_url}</div>
					<div className={style['btn']} onClick={copy}>{t('invite.title8')}</div>
				</div>
				{/*<Space direction="vertical" align="center">
				  <QRCode value={text || '-'} size="232" bgColor="#ffffff"/>
				</Space>*/}
			</div>
		</React.Fragment>
	)
}


export default Invite
